import React from 'react';
import { Row,Col, Menu, Icon,Button , Modal,Tabs,Form,Input,message } from 'antd';
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
//import Logo from "../../../static/img/logo.png";
import {Link} from "react-router";
import "../../../static/css/mobile/header.less";
import {post} from "../../../utils/http";

class Header extends React.Component{
	
	constructor(){
		
		super()
		
		this.state={
			
			isLogin:false,
			person:"未知",
			modalShow:false,
			current:"login",
			id:0,
			action:'login',
		}
	}
	
componentDidMount(){
	
		var username=localStorage.getItem('username');
		
		if(username){
			
			this.setState({
				
				person:username,
				
				isLogin:true
			})
		}
}
	//
	changeMenuSelect(e){
		
		this.setState({
			current:e.key
		})
		if(e.key=='login'){
			this.showHideModel(true)
		}
	}

	handlerReset(e){
		this.showHideReset(true)
	}
	
	//登录注册的显示与隐藏
	showHideModel(flag){
		this.setState({
			modalShow:flag
		})
	}
	//登录注册的显示与隐藏
	showHideModel(flag){
		this.setState({
			modalShow:flag
		})
	}
	showHideReset(flag){
		this.setState({
			modalReset:flag
		})
	}

	getTabKey(key){
		if(key=='1'){
			this.setState({
				action:'login'
			})
		}else if(key=='2'){
			this.setState({
				action:'register'
			})
		}	
	}

	submitEvent(e){
		e.preventDefault();//阻止默认事件(跳转)
		var formData=this.props.form.getFieldsValue();
		//console.log(formData);
		var action=this.state.action;
		if(action=='login'){
			//登录
			let username=formData.userName;
			let password=formData.password;
			let result = post("http://localhost:3000/selectuser",{
				username:formData.userName,
				password:formData.password
			})
			.then(res => {
				return res.json()
			})
			.then(json => {	
				if(json.msg){
					//暂未注册
					message.info(json.msg);
				}else{
					if(username==json[0].username&&password==json[0].password){
						this.showHideModel(false)
						this.setState({
							isLogin:true,
							person:json[0].username,
							id:json[0].id
						})
						//本地存储
						localStorage.setItem('username',json[0].username);
						localStorage.setItem("id",json[0].id);
					}else{
						message.info('用户名或密码不正确,请重新输入!');
					}
				}
			})
		}else if(action=='register'){
			let username=formData.reg_userName;
			let password=formData.reg_password;
			let apasswprd=formData.areg_password;
			
			let result1 = post("http://localhost:3000/selectuser",{
				username:formData.reg_userName
			})
			.then(res => {
				return res.json()
			})
			.then(json => {	
				if(json.msg){
					//暂未注册
					if(password==apasswprd){
						//注册
						let result = post("http://localhost:3000/adduser",{
							username:formData.reg_userName,
							password:formData.reg_password
						})
						.then(res => {
							return res.json()
						})
						.then(json => {	
							if(json.msg){
								//注册成功
								message.info(json.msg);
							}
						})
					}else{
						message.info('密码和确认密码不一致,请重新输入!');
					}	
				}else{
					message.info('用户名已存在,请重新输入!');
				}
			})
		}
	}
	logOut(){
		this.setState({
			isLogin:false
		})
		//清除本地缓存
		localStorage.removeItem("username");
		localStorage.removeItem("id");
	}
	handleSubmit(){}
	
	render(){
		var { isLogin ,person,modalShow,current} = this.state;
		
		const { getFieldDecorator} = this.props.form;
		
		var showLogin=isLogin
					?
					<Menu.Item key='user' className='userIn'>
						<Button type="primary" onClick={this.handlerReset.bind(this)}>{person}</Button>
						<Button type="primary" onClick={this.logOut.bind(this)}>退出</Button>
					</Menu.Item>
					:
					<Menu.Item key='login' className='userfo'>登录丨注册</Menu.Item>
		
		return(
			
			<div className="headerBox">
			    <Row>
			       <Col span={3}>
			         <Icon type="setting" className="iconFont"/>
			       </Col>
			       
			       <Col span={15} className="formBox">
			         <Form  layout="inline" onSubmit={this.handleSubmit.bind(this)}>
			       
			            <FormItem >
			                 {getFieldDecorator('search', {
					            rules: [{ required: true, message: 'Please input your search!' }],
					          })(
					            <Input placeholder="search" />
					          )}
			            </FormItem>
			            <Button type="primary" htmlType="submit"><Icon type="search" /></Button>
			         </Form>
			           
			       </Col>
			       
			       <Col span={6}>
			           <Menu onClick={this.changeMenuSelect.bind(this)} selectedKeys={[current]}>
			               {showLogin}
			           </Menu>
			           <Modal visible={modalShow} onOk={() => this.showHideModel(false)}  onCancel={()=>this.showHideModel(false)}>
					        <Tabs defaultActiveKey="1" onChange={this.getTabKey.bind(this)}>
					        	<TabPane tab="登录" key="1">
							    	<Form onSubmit={this.submitEvent.bind(this)}>
							    		<FormItem>
							    			{getFieldDecorator('userName', {
									            rules: [{ required: true, message: 'Please input your username!' }],
									        })(
									            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
									        )}
							    		</FormItem>
							    		<FormItem>
							    			{getFieldDecorator('password', {
									            rules: [{ required: true, message: 'Please input your Password!' }],
									        })(
									            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
									        )}
							    		</FormItem>
							    		<Button type="primary" htmlType="submit">登录</Button>
							    	</Form>
							    </TabPane>
							    <TabPane tab="注册" key="2">
							    	<Form onSubmit={this.submitEvent.bind(this)}>
							    		<FormItem>
							    			{getFieldDecorator('reg_userName', {
									            rules: [{ required: true, message: 'Please input your username!' }],
									        })(
									            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
									        )}
							    		</FormItem>
							    		<FormItem>
							    			{getFieldDecorator('reg_password', {
									            rules: [{ required: true, message: 'Please input your Password!' }],
									        })(
									            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
									        )}
							    		</FormItem>
							    		<FormItem>
							    			{getFieldDecorator('areg_password', {
									            rules: [{ required: true, message: 'Please input your Password!' }],
									        })(
									            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
									        )}
							    		</FormItem>
							    		<Button type="primary" htmlType="submit">注册</Button>
							    	</Form>
							    </TabPane>  
							</Tabs>
					    </Modal>
			       </Col>
			    </Row>
			
			</div>
		)
	}
}

export default Header = Form.create({})(Header);
